<template>
  <div class="ezuikit_camera_video_wrap">
    <div id="video-container" ref="video" class="content video"></div>
    <div class="action_box">
      <div class="headert_box">
        <span
          ><CnMediumSpan style="font-size: 18px">{{ props.option.cameraName }}</CnMediumSpan></span
        >
        <div class="ba_box">
          <a-button type="primary" @click="lookPlaybackClick">查看回放</a-button>
          <VedioPlay id="myPlayer" :option="props.option" @success="editNameSuccessF"></VedioPlay>
        </div>
      </div>
      <div class="ytkz_box">
        <div class="header_box">
          <img class="icon_img" src="./image/ytkz.png" />
          <span class="title"><CnMediumSpan style="font-size: 16px">云台控制</CnMediumSpan></span>
        </div>
        <div class="ytkz_btn_box">
          <div class="ysy_ytkz_action_item_box">
            <div class="ytkz_action_btn_box">
              <i class="iconfont icon-zuoshang" @click="directionControl(4)"></i>
            </div>
          </div>
          <div class="ysy_ytkz_action_item_box">
            <div class="ytkz_action_btn_box">
              <i class="iconfont icon-shang" @click="directionControl(0)"></i>
            </div>
          </div>
          <div class="ysy_ytkz_action_item_box">
            <div class="ytkz_action_btn_box">
              <i class="iconfont icon-youshang" @click="directionControl(6)"></i>
            </div>
          </div>
          <div class="ysy_ytkz_action_item_box">
            <div class="ytkz_action_btn_box">
              <i class="iconfont icon-zuo" @click="directionControl(2)"></i>
            </div>
          </div>
          <div class="ysy_ytkz_action_item_box">
            <div class="ytkz_action_btn_box">
              <i class="iconfont icon-zanting" @click="stopTurn"></i>
            </div>
          </div>
          <div class="ysy_ytkz_action_item_box">
            <div class="ytkz_action_btn_box">
              <i class="iconfont icon-you" @click="directionControl(3)"></i>
            </div>
          </div>
          <div class="ysy_ytkz_action_item_box">
            <div class="ytkz_action_btn_box">
              <i class="iconfont icon-zuoxia" @click="directionControl(5)"></i>
            </div>
          </div>
          <div class="ysy_ytkz_action_item_box">
            <div class="ytkz_action_btn_box">
              <i class="iconfont icon-xia" @click="directionControl(1)"></i>
            </div>
          </div>
          <div class="ysy_ytkz_action_item_box">
            <div class="ytkz_action_btn_box">
              <i class="iconfont icon-youxia" @click="directionControl(7)"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 回放弹窗 -->
    <a-modal
      v-model:visible="isShowPlaybackVideoModal"
      title="查看回放"
      :footer="null"
      :width="800"
      @cancel="playbackVideoModalCancel"
    >
      <div class="ysy_play_back_modal_box">
        <div class="select_time_box">
          <span class="label"><CnMediumSpan>选择时间</CnMediumSpan></span>
          <!--<a-range-picker
            :show-time="{format: 'HH:mm'}"
            format="YYYY-MM-DD HH:mm"
            valueFormat="YYYY-MM-DD hh:mm"
            :placeholder="['开始时间', '结束时间']"
            @change="lookPlaybackTimeSelectChange"
            @ok="lookPlaybackTimeSelectConfirm"
            allowClear
          /> -->
          <el-date-picker
            v-model="playbackSelectTime"
            type="datetimerange"
            range-separator="至"
            value-format="YYYY-MM-DD HH:mm:ss"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
          <a-button
            type="primary"
            style="margin-left: 18px; position: relative; top: 0px"
            @click="playBackModalLookClick"
          >
            <div class="look_select_time_btn_c_box">
              <i class="iconfont icon-look"></i>
              <span class="look_btn_text"
                ><CnMediumSpan style="color: white">查看</CnMediumSpan></span
              >
            </div>
          </a-button>
        </div>
        <div class="play_back_video_box" id="paly_back_video_box">
          <span
            ><CnMediumSpan style="letter-spacing: 2px; position: relative; top: 20px"
              >请选择时间，点击查看按钮进行监控回放！</CnMediumSpan
            ></span
          >
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
  import {defineComponent, ref, onMounted, onUnmounted} from 'vue'
  export default defineComponent({
    name: 'EzuikitCameraVideo'
  })
</script>
<script setup>
  import {CnMediumSpan} from '@/components/text'
  import VedioPlay from '@/views/videoSurveillance/components/vedioPlay.tsx'
  import EZUIKit from 'ezuikit-js'
  import axios from 'axios'
  import {message} from 'ant-design-vue'
  import dayjs from 'dayjs'

  // 监控直播控件Ref
  const eZUIKitPlayer = ref('')
  // 监控回放控件Ref
  const eZUIKitPlayBackPlayer = ref('')
  // 监控摄像头Token
  const accessToken = ref('')
  // 监控摄像头Url
  const accessUrl = ref('')

  // emits
  const emits = defineEmits('success')

  // props
  const props = defineProps(['option'])

  // 显示回放弹窗的标识
  const isShowPlaybackVideoModal = ref(false)

  // 回放弹窗关闭点击事件
  const playbackVideoModalCancel = () => {
    console.log('关闭窗口')

    setTimeout(() => {
      eZUIKitPlayer.value?.stop()
      eZUIKitPlayBackPlayer.value?.stop()
    }, 1000)
  }

  // 查看回放点击事件
  const lookPlaybackClick = () => {
    isShowPlaybackVideoModal.value = true
  }

  // 回放选择时间
  const playbackSelectTime = ref('')

  // 回放时间数据
  const playbackTimeData = ref([])

  // 查看回放日期时间选择change事件
  const lookPlaybackTimeSelectChange = e => {
    console.log('选择时间change', e)
    playbackTimeData.value = e
  }

  // 查看回放日期时间选择确定事件
  const lookPlaybackTimeSelectConfirm = e => {
    console.log('选择时confirm', e)
  }

  // 回放弹窗点击事件
  const playBackModalLookClick = () => {
    let nPlaybackTimeData = playbackSelectTime.value
    console.log('选择时间', playbackSelectTime.value)

    let startTime = nPlaybackTimeData[0].replace(/[^0-9]/g, '')
    let endTime = nPlaybackTimeData[1].replace(/[^0-9]/g, '')
    console.log('回放时间-开始', startTime)
    console.log('回放时间-结束', endTime)
    initEZUIKitPlaybackVideoPlayer(startTime, endTime)
  }

  // 修改名称成功回调
  const editNameSuccessF = () => {
    emits('success')
  }

  //停止控制控制云台
  const stopTurn = () => {
    axios({
      url: 'https://open.ys7.com/api/lapp/device/ptz/stop',
      method: 'post',
      params: {
        accessToken: props.option.accessToken,
        channelNo: Number(props.option.channelNo), // 通道号
        deviceSerial: props.option.deviceSerial //序列号
      },
      timeout: 2000
    }).then(res => {
      console.log(res.data)

      //  console.log(res.data)
      // if (res.data.code == '20007') {
      // this.$message(res.data.msg);
      console.log(res.data.msg)
      message.success(res.data.msg)
      // }
    })
  }

  // 云平台控制
  const directionControl = num => {
    axios({
      url: 'https://open.ys7.com/api/lapp/device/ptz/start',
      method: 'post',
      params: {
        accessToken: props.option.accessToken, //accesstoken码，一般一周过期
        speed: 1, //旋转速度
        direction: num, //方向，传入数字，对应数字在api文档有
        channelNo: Number(props.option.channelNo), // 通道号
        deviceSerial: props.option.deviceSerial //序列号
      },
      timeout: 2000
    }).then(res => {
      // if (res.data.code == '20007') {
      // this.$message(res.data.msg);
      console.log(res.data.msg)
      message.success(res.data.msg)
      // }
    })
  }

  // 初始化萤石云视频对接
  const initEZUIKitPlayer = () => {
    eZUIKitPlayer.value = new EZUIKit.EZUIKitPlayer({
      id: 'video-container',
      // accessToken: accessToken.value,
      // url: accessUrl.value,
      accessToken: props.option.accessToken,
      url: props.option.cameraUrl,
      header: ['capturePicture', 'save', 'zoom'],
      footer: ['fullScreen'],
      template: 'security',
      width: 990,
      height: 660,
      autoplay: true,
      audio: 0
    })
  }

  // 初始化萤石云回放视频
  const initEZUIKitPlaybackVideoPlayer = (begin, end) => {
    let joinPlayBackUrl = `${props.option.cameraOldUrl}?begin=${begin}&end=${end}`
    console.log('拼接回放地址', joinPlayBackUrl)
    eZUIKitPlayer.value = new EZUIKit.EZUIKitPlayer({
      id: 'paly_back_video_box', // 视频容器ID
      header: ['capturePicture', 'save', 'zoom'],
      footer: ['fullScreen'],
      template: 'security',
      width: 750,
      height: 500,
      accessToken: props.option.accessToken,
      url: joinPlayBackUrl
    })
  }

  onMounted(() => {
    console.log('props', props.option)

    initEZUIKitPlayer()
    // initEZUIKitPlaybackVideoPlayer()
  })

  onUnmounted(() => {
    // eZUIKitPlayer.value?.stop()
    setTimeout(() => {
      eZUIKitPlayer.value?.stop()
      eZUIKitPlayBackPlayer.value?.stop()
    }, 200)
  })
</script>

<style lang="less" scoped>
  .content {
    background: #fff;
    height: 368px;
    width: 1000px;
    // border: 1px solid red;
  }
  .ytkz_box {
    // border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);
    border-radius: 2px;
    padding: 16px 20px;
    margin-top: 24px;
    .header_box {
      display: flex;
      flex-direction: row;
      justify-content: start;

      .icon_img {
        width: 24px;
        height: 24px;
        margin-right: 6px;
      }

      .title {
        font-size: 16px;
      }
    }
    .ytkz_btn_box {
      margin: 0 auto;
      width: 180px;
      height: 180px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-content: space-around;
      // border: 1px solid red;

      .ysy_ytkz_action_item_box {
        width: 54px;
        height: 54px;
        // border: 1px solid red;

        .ytkz_action_btn_box {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          // background-color: rgba(gray, 0.2);
          // border: 1px solid rgba(black, 0.1);
          position: relative;

          .iconfont {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 40px;
            cursor: pointer;
            color: rgba(0, 0, 0, 0.7);
          }

          .iconfont:active {
            color: rgb(80, 130, 238);
          }
        }
      }
    }
  }

  .ezuikit_camera_video_wrap {
    width: 87.4vw;
    display: flex;
    flex-direction: row;

    .action_box {
      background-color: white;
      margin-left: 20px;
      flex: 1;
      padding: 20px;
      .headert_box {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .ba_box {
          display: flex;
          flex-direction: row;
        }
      }
    }
  }

  .ysy_play_back_modal_box {
    width: 800px;
    height: 594px;
    display: flex;
    flex-direction: column;
    padding: 0px 24px;

    .select_time_box {
      padding: 20px 86px;
      display: flex;
      flex-direction: row;
      .label {
        position: relative;
        top: 5px;
        margin-right: 8px;
      }

      .look_select_time_btn_c_box {
        padding: 0px 6px;
        display: flex;
        flex-direction: row;

        .iconfont {
          margin-right: 6px;
          // font-size: 18px;
        }

        .look_btn_text {
        }
      }
    }

    .play_back_video_box {
      width: 750px;
      height: 200px;
      // border: 1px solid rgba(gray, 0.5);
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      margin-top: 20px;
      text-align: center;
      font-size: 18px;
      letter-spacing: 2px;
    }
  }

  :deep(.ant-modal) {
    top: 12px !important;
  }

  :deep(.ant-btn-primary) {
    background: #1758f0 !important;
  }

  #paly_back_video_box {
    padding-left: 20px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
</style>
